@ts-nocheck
<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px" style="text-align: left;">
      <el-row>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="航空器呼号">
            <el-input v-model="inputedCallsign" placeholder="请输入航空器呼号" style="width:100%" @input="matchCompany"
              ref="inputCallsign"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="航空公司">
            <el-select v-model="form.company" placeholder="请选择航空公司" style="width:100%">
              <el-option v-for="item in statics.companies" :key="item.code"
                :label="item.callsign + ' (' + item.code + ')'" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="日期 (PEK)">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" style="width: 100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="时间 (PEK)">
            <el-time-picker placeholder="选择时间" v-model="form.time" format="HH:mm:ss" value-format="HH:mm:ss"
              style="width: 100%"></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="席位号">
            <el-select v-model="form.seat" placeholder="请选择席位号" style="width:100%" @change="handleSeatChange">
              <el-option v-for="item in statics.seats" :key="item.value" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="使用频率">
            <el-select v-model="form.frequency" placeholder="请选择使用频率" style="width:100%">
              <el-option v-for="item in statics.frequencies" :key="item.value" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="管制席">
            <el-select v-model="form.controllerA" placeholder="请选择管制席人员" style="width:100%">
              <el-option v-for="item in controllers" :key="item.number" :label="item.name" :value="item.number">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.clientGroup + " / " + item.clientOffice
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="协调席">
            <el-select v-model="form.controllerB" placeholder="请选择协调席人员" style="width:100%">
              <el-option v-for="item in controllers" :key="item.number" :label="item.name" :value="item.number">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.clientGroup + " / " + item.clientOffice
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="错误类型">
            <el-select v-model="form.type" placeholder="请选择错误类型" style="width:100%">
              <el-option v-for="item in statics.types" :key="item.value" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="严重程度">
            <el-checkbox v-model="form.multiple" label="经过多次纠正" border style="width:100%" true-label="是"
              false-label="否"></el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="简要描述">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" v-model="form.details"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="confirmCommit">提交记录</el-button>

            <el-button @click="confirmReset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import statics from "./statics.js";
import dateFormat from "@/utils/dateFormat.js";
export default {
  data() {
    return {
      form: {
        callsign: "",
        company: "",
        date: "",
        time: "",
        frequency: "",
        seat: "",
        controllerA: "",
        controllerB: "",
        type: "",
        multiple: "否",
        details: "",
      },
      formBlank: "",
      statics: statics,
      controllers: [],
    };
  },
  computed: {
    inputedCallsign: {
      get: function () {
        return this.form.callsign;
      },
      set: function (value) {
        this.form.callsign = value.toUpperCase();
      },
    },
  },
  methods: {
    dateFormat,
    loadControllers() {
      console.log("loadControllers");
      this.axios
        .get("./api/get_all_controllers.php", { timeout: 1000 })
        .then((response) => {
          // console.log('response.data', response.data);
          this.controllers = response.data;
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    handleSeatChange(value) {
      console.log("handleSeatChange");
      this.matchControllers(value);
      this.matchFrequency(value);
    },
    matchFrequency(value) {
      let matched = false;
      for (let i = 0; i < this.statics.frequencies.length; i++) {
        if (this.statics.frequencies[i].seat == value) {
          this.form.frequency = this.statics.frequencies[i].value;
          matched = true;
        }
      }
      if (!matched && value != "") {
        this.form.frequency = "其他";
      }
    },
    matchCompany(value) {
      if (value.length > 2) {
        value = value.toUpperCase();
        console.log("callsign", value);
        let matched = false;
        let input = value.substring(0, 3);
        // console.log(input);
        for (let i = 0; i < this.statics.companies.length; i++) {
          if (this.statics.companies[i].code == input) {
            this.form.company = input;
            matched = true;
          }
        }
        if (!matched) this.form.company = "其他";
      } else {
        this.form.company = "";
      }
    },
    matchSeat() {
      console.log("matchSeat");
      this.axios
        .get("./api/get_seat_by_ip.php", { timeout: 1000 })
        .then((response) => {
          console.log("matchSeat", response.data);
          if (response.data.seat != "") {
            this.form.seat = response.data.seat;
            this.matchFrequency(response.data.seat);
            this.matchControllers(response.data.seat);
          } else {
            this.$message.warning(
              "未能通过您的IP地址匹配对应的席位，请在下拉菜单中选择"
            );
          }
        })
        .catch((error) => {
          console.log("matchSeat", error);
          this.$message.error(
            "尝试通过IP匹配席位时发生网络错误，请在下拉菜单中选择"
          );
        });
    },
    matchControllers(seat) {
      console.log("matchControllers");
      this.axios
        .get("./api/get_controllers_by_seat.php?", {
          params: { seat },
          timeout: 5000,
        })
        .then((response) => {
          console.log("matchControllers", response.data);
          if (response.data.count > 0) {
            this.form.controllerA = response.data.conA.userId;
            this.form.controllerB = response.data.conB.userId;
          } else {
            this.$message.warning(
              "未能通过您的席位查询到已打卡人员，请在下拉菜单中选择"
            );
          }
        })
        .catch((error) => {
          console.error("matchControllers", error);
          this.$message.error(
            "尝试查询席位人员时发生网络错误，请在下拉菜单中选择"
          );
        });
    },
    matchDateTime() {
      this.form.date = this.dateFormat('YYYY-mm-dd');
      this.form.time = this.dateFormat('HH:MM:SS');
      console.log(this.form.date, this.form.time);
    },
    confirmCommit() {
      console.log("confirmCommit");
      let result = new Array();
      if (this.form.callsign.length < 4) {
        result.push("航班号长度不应少于4位");
      }
      if (this.form.company.length == 0) {
        result.push("请选择航空公司");
      }
      if (this.form.seat == "") {
        result.push("请选择席位号");
      }
      if (this.form.frequency == "") {
        result.push("请选择使用频率");
      }
      if (this.form.controllerA == "") {
        result.push("请选择管制席管制员");
      }
      if (this.form.controllerB == "") {
        result.push("请选择协调席管制员");
      }
      if (this.form.type == "") {
        result.push("请选择错误类型");
      }
      if (this.form.details.length < 10) {
        // result.push("描述不应少于10个字");
      }
      if (result.length > 0) {
        let content = "<ul><li>" + result.join("；</li><li>") + "。</li></ul>";
        this.$alert(content, "内容填写错误：", {
          dangerouslyUseHTMLString: true,
        });
      } else {
        this.$confirm(
          "请确认内容填写正确，提交后将不能在再次修改。",
          "确认提交吗？",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.handleCommit();
          })
          .catch(() => {
            console.log("cancelled commit content");
          });
      }
    },
    confirmReset() {
      {
        this.$confirm("", "确认清空所有内容吗？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.handleReset();
          })
          .catch(() => {
            console.log("cancelled clear content");
          });
      }
    },
    handleReset() {
      this.form = JSON.parse(this.formBlank);
      this.matchDateTime();
      this.matchSeat();
      this.$refs.inputCallsign.focus();
    },
    handleCommit() {
      let postData = JSON.parse(JSON.stringify(this.form));
      postData.controllerA = this.matchControllerInfo(postData.controllerA);
      postData.controllerB = this.matchControllerInfo(postData.controllerB);
      this.axios
        .post("./api/save_rectify_record.php", postData, {
          timeout: 1000,
        })
        .then((response) => {
          console.log("handleCommit", response.data);
          this.handleReset();
          this.$notify.success({ title: "提交成功" });
        })
        .catch((error) => {
          console.log("error", error);
          this.$notify.error({
            title: "提交失败",
            message: "请将提交内容进行纸质记录",
          });
        });
    },
    matchControllerInfo(number) {
      for (let i = 0; i < this.controllers.length; i++) {
        if (this.controllers[i].number == number) {
          return this.controllers[i];
        }
      }
      return false;
    },
  },
  created() {
    this.formBlank = JSON.stringify(this.form);
    this.form = JSON.parse(this.formBlank);
    this.matchDateTime();
    this.loadControllers();
    this.matchSeat();
  },
  mounted() {
    this.$refs.inputCallsign.focus();
  },
};
</script>

<style>
textarea {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>